<script setup lang="ts">
import CheckboxListSelector from '../checkbox-list-selector/checkbox-list-selector.vue';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
import { showToast, eventCenter, getCurrentInstance } from '@tarojs/taro';
import { reactive, onMounted, watch } from 'vue';
import { isJsonString } from '/@/utils/string-util';
const props = defineProps<{
  item: FlowPathTemplateApi.AttributeExtendDto;
}>();

const emits = defineEmits<{
  (e: 'onChange', values: string): void;
}>();

const state = reactive<{
  options: { name: string; value: string }[];
  checkboxValues: string[];
  checkboxPickerVisible: boolean;
  checkboxLabels: string;
}>({
  options: [],
  checkboxValues: [],
  checkboxPickerVisible: false,
  checkboxLabels: '',
});
watch(
  () => props.item.attributeValue,
  () => {
    if (props.item.attributeValue) {
      const values = props.item.attributeValue.split(',');
      const radioValArr = state.options.filter((item) => values.includes(item.value));
      state.checkboxLabels = radioValArr.map((item) => item.name).join(', ');
      state.checkboxValues = radioValArr.map((item) => item.value);
    }
  },
);
//解析可选项
if (
  props.item.attributeOption &&
  props.item.attributeOption.length > 0 &&
  isJsonString(props.item.attributeOption)
) {
  const radioValArr = JSON.parse(props.item.attributeOption);
  state.options.push(...radioValArr);
}
//页面-只读-显示结果
if (props.item.readonlyAble === 1 && props.item.attributeValue) {
  const values = props.item.attributeValue.split(',');
  const radioValArr = state.options.filter((item) => values.includes(item.value));
  state.checkboxLabels = radioValArr.map((item) => item.name).join(', ');
  state.checkboxValues = radioValArr.map((item) => item.value);
}

//页面-可编辑-默认值-显示-结果
if (props.item.editAble === 1 && props.item.attributeValue && props.item.attributeDefault) {
  const values = props.item.attributeValue.split(',');
  const radioValArr = state.options.filter((item) => values.includes(item.value));
  state.checkboxLabels = radioValArr.map((item) => item.name).join(', ');
  state.checkboxValues = radioValArr.map((item) => item.value);
}
/**
 * 选择回调
 *
 */
function change(checkboxValues: string[]) {
  state.checkboxValues = checkboxValues;
}

function selectConfirm() {
  if (state.checkboxValues.length === 0) {
    showToast({ title: '请选择', icon: 'error' });
    return;
  }

  //选中数组
  const radioValArr = state.options.filter((item) => state.checkboxValues.includes(item.value));
  state.checkboxLabels = radioValArr.map((item) => item.name).join(', ');

  if (radioValArr.length > 0) {
    console.log('onChange', state.checkboxValues.join(','));
    emits('onChange', state.checkboxValues.join(','));
  }
  state.checkboxPickerVisible = false;
}

function selectCheckbox() {
  state.checkboxPickerVisible = !state.checkboxPickerVisible;
}
/**
 * popup关闭
 */
function close() {
  state.checkboxPickerVisible = false;
}
onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    //清理数据，当成功页面返回的时候，显示初始状态
    state.checkboxValues = [];
    state.checkboxLabels = '';
    //页面-只读-显示结果
    if (props.item.readonlyAble === 1 && props.item.attributeValue) {
      const values = props.item.attributeValue.split(',');
      const radioValArr = state.options.filter((item) => values.includes(item.value));
      state.checkboxLabels = radioValArr.map((item) => item.name).join(', ');
      state.checkboxValues = radioValArr.map((item) => item.value);
    }

    //页面-可编辑-默认值-显示-结果
    if (props.item.editAble === 1 && props.item.attributeValue && props.item.attributeDefault) {
      const values = props.item.attributeValue.split(',');
      const radioValArr = state.options.filter((item) => values.includes(item.value));
      state.checkboxLabels = radioValArr.map((item) => item.name).join(', ');
      state.checkboxValues = radioValArr.map((item) => item.value);
    }
  });
});
</script>
<template>
  <template v-if="item.readonlyAble === 1">
    <nut-cell :title="item.attributeName" :desc="state.checkboxLabels" />
  </template>
  <!--编辑 -->
  <template v-else>
    <nut-form-item
      :label="item.attributeName"
      :required="item.attributeRequired === 1"
      :label-width="120"
    >
      <view class="approve-edit-checkbox-picker">
        <view class="approve-edit-checkbox-picker__select" @click="selectCheckbox">
          <text>{{ state.checkboxLabels || (item.tips ? item.tips : '请选择') }}</text>
          <app-nut-icon-right />
        </view>
        <nut-popup
          round
          position="bottom"
          :style="{ height: '70vh' }"
          v-model:visible="state.checkboxPickerVisible"
          @click-overlay="close"
        >
          <view class="approve-edit-checkbox-picker__wrapper">
            <view class="approve-edit-checkbox-picker__header">
              <text class="approve-edit-checkbox-picker__header--left" @click="close">取消</text>
              <text class="approve-edit-checkbox-picker__header--center">多选项选择</text>
              <text class="approve-edit-checkbox-picker__header--right" @click="selectConfirm"
                >确定</text
              >
            </view>
            <checkbox-list-selector
              :checkbox-values="state.checkboxValues"
              :items="state.options"
              @on-selected="change"
              ref="checkboxListSelectorRef"
            />
          </view>
        </nut-popup>
      </view>
    </nut-form-item>
  </template>
</template>
<style lang="scss">
.approve-edit-checkbox-picker {
  &__wrapper {
    padding: 20px;
  }
  &__select {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  &__header {
    display: flex;
    align-items: center;
    &--left {
      color: #666;
      font-size: 34px;
    }
    &--center {
      color: #333;
      font-size: 36px;
      font-weight: bold;
      flex: 1;
      flex-grow: 1;
      text-align: center;
    }
    &--right {
      color: #507aee;
      font-size: 34px;
    }
  }
}
</style>
